<script setup>
import {computed, onMounted, ref} from "vue";
import {getReturnSchoolInfoListAPI} from "@/api/returnSchool.js";
import {formatDateTime} from "@/utils/formatDate.js";
import {getUserInfoByIdAPI} from "@/api/user.js";

const size = ref('default')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const returnSchoolInfoList = ref([])
const count = ref(0)
const page = ref(1)
const limit = ref(5)
const formatUserInfo = async (id) => {
  const result = await getUserInfoByIdAPI(id)
  return result.data.data
}
const getReturnSchoolInfoList = async () => {
  const result = await getReturnSchoolInfoListAPI(page.value, limit.value)
  count.value = result.data.data.count
  returnSchoolInfoList.value = result.data.data.rows
  for (const item of returnSchoolInfoList.value) {
    item.userInfo = await formatUserInfo(item.userId)
  }
  console.log(returnSchoolInfoList.value)
}
const onSizeChange = async () => {
  await getReturnSchoolInfoList()
}
const onCurrentChange = async () => {
  await getReturnSchoolInfoList()
}
onMounted(() => {
  getReturnSchoolInfoList()
})
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>返校管理</span>
      </div>
    </template>
    <el-space wrap>
      <el-card v-for="returnSchoolInfo in returnSchoolInfoList" :key="returnSchoolInfo.id" class="box-card"
               style="width: 796px">
        <template #header>
          <div class="card-header">
            <span>{{ returnSchoolInfo.userInfo?.name }}的返校申请单</span>
            <el-button :type="returnSchoolInfo.isHandle ? 'success' : 'warning'" text>
              {{ returnSchoolInfo.isHandle === 0 ? '未操作' : '已操作' }}
            </el-button>
          </div>
        </template>
        <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <user/>
                </el-icon>
                姓名
              </div>
            </template>
            郝秀功
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Cellphone/>
                </el-icon>
                学号
              </div>
            </template>
            202222450619
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <iphone/>
                </el-icon>
                电话
              </div>
            </template>
            13932316955
          </el-descriptions-item>
          <el-descriptions-item span="2">
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets/>
                </el-icon>
                返校时间
              </div>
            </template>
            <el-tag size="small">{{ formatDateTime(returnSchoolInfo.startTime) }} ~
              {{ formatDateTime(returnSchoolInfo.endTime) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets/>
                </el-icon>
                毕业时间
              </div>
            </template>
            <el-tag size="small">{{returnSchoolInfo.userInfo?.graduationYear}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building/>
                </el-icon>
                原因
              </div>
            </template>
            {{ returnSchoolInfo.reason }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="return-button">
          <el-button type="primary" :disabled="!!returnSchoolInfo?.isHandle">同意</el-button>
          <el-button type="danger" :disabled="!!returnSchoolInfo?.isHandle">拒绝</el-button>
        </div>
      </el-card>
    </el-space>
    <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[2, 4 ,6, 8]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="count"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange"
                   style="margin-top: 20px; padding-right: 20px;justify-content: flex-end"/>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .return-button {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>